<template>
  <div class="zspt">
    <div>
        <HeaderVue/>
    </div>
    <div class="zsptct">
        <div class="daohang">
            <DaoHang :currentPath="currentPath"/>
        </div>
        <div class="showcom">
            <router-view></router-view>
        </div>
        <div class="zspttool">
            <div class="tooldiv">
                <div class="toolicon">
                    <svg t="1754296776311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6799" width="40" height="40"><path d="M75.8 45.1h366.9C480 48.7 471 113.6 471 155.7v200.6c0 43.6 8.3 97.1-20.9 109.4-19 8.1-70.2 2.4-94.8 2.4H160.8c-45 0-106.4 10.6-113.3-28v-367c5-13.7 13.8-23.6 28.3-28m50.5 82.7v261.4H391V124.1H127.5c-1.4 0.2-1.3 1.9-1.2 3.7m442-82.7h366.9c15 5.5 25.2 15.6 28.3 32.8v357.5c-3.4 14.9-11.2 27.5-25.9 31.6-23.9 6.7-63.7 1.2-92.3 1.2H657c-28.4 0-70.5 5.9-93.6-1.2-32.6-10-23.4-72.8-23.4-116.7V163c0-50.7-11.3-110.8 28.3-117.9m50.5 82.7v261.4h264.7V124.1H620c-1.4 0.2-1.3 1.9-1.2 3.7m-371.9 76.6c36.9-6.9 65.9 17.7 66.5 51.1 0.8 44-44.7 68.1-80 49.9-40.5-21-37.8-91.5 13.5-101m492.6 0c86.8-16 85.2 119.8 0 105.8-54.2-9-56-95.5 0-105.8M440.3 961.9H77c-15.1-4.6-25.3-14-29.6-29.2v-366C51 556 59.3 543.5 72 539.9c24.1-6.7 63.5-1.2 92.4-1.2h188.4c27.8 0 68.4-6.1 93.6 1.2 34.1 9.9 24.6 71.7 24.6 115.5v193.3c0 47.4 10.3 109-30.7 113.2m-314-340.5v261.4H391v-265H127.5c-1.4 0.2-1.3 1.9-1.2 3.6m837.3-49.8v102.1c-2.9 34.4-0.4 74.2-1.2 110.6H700.1v-59.6c-24.6-2.8-54.6-0.4-81.3-1.2-2.9 77-0.4 159.3-1.2 238.3h-48C528.2 953.7 540 892.5 540 844V655.5c0-28.3-5.8-70.8 1.2-93.6 8.4-27.2 44.8-23.1 81.3-23.1H801v161.7h82.5c0.8-53.5-1.6-110.2 1.2-161.7 39.8-2.4 76.5-1.8 78.9 32.8M253.1 696.8c39.4-4.3 71.9 33.1 56.6 74.2-21.2 57-122.4 35.6-103.4-36.5 5.2-19.9 20.4-34.8 46.8-37.7m535.6 265.1H700c0.8-31.2-1.6-65.7 1.2-94.9h87.4v94.9m175-94.8v62c-3.4 17.3-13.7 27.8-29.5 32.8h-62.8c0.8-31.2-1.6-65.7 1.2-94.8h91.1" fill="#8a8a8a" p-id="6800"></path></svg>
                </div>
                <span class="toolname">溯源码</span>
            </div>
            <div class="tooldiv">
                <div class="toolicon">
                    <svg t="1754296862912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9193" width="40" height="40"><path d="M320 896 192 896 192 192l128 0L320 896zM512 64 384 64l0 832 128 0L512 64zM704 448 576 448l0 448 128 0L704 448zM896 320l-128 0 0 576 128 0L896 320z" fill="#8a8a8a" p-id="9194"></path></svg>
                </div>
                <span class="toolname">数据统计</span>
            </div>
            <div class="tooldiv">
                <div class="toolicon">
                    <svg t="1754296958975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13183" width="40" height="40"><path d="M522.3 156.3c-5.1-9.7-13.5-9.7-18.6 0L107.3 909.9c-5.1 9.7-0.3 17.7 10.7 17.7h790c11 0 15.8-8 10.7-17.7L522.3 156.3z m-18.6 119c5.1-9.7 13.5-9.7 18.6 0l304.5 579c5.1 9.7 0.3 17.7-10.7 17.7H209.8c-11 0-15.8-8-10.7-17.7l304.6-579z" fill="#8a8a8a" p-id="13184"></path><path d="M485.5 468.9c0-11 9-20 20-20h15c11 0 20 9 20 20v170.6c0 11-9 20-20 20h-15c-11 0-20-9-20-20V468.9zM461.5 762.9c0-28.8 23.1-52.1 51.5-52.1 28.5 0 51.5 23.3 51.5 52.1S541.4 815 513 815s-51.5-23.3-51.5-52.1z" fill="#8a8a8a" p-id="13185"></path></svg>
                </div>
                <span class="toolname">提醒</span>
            </div>
        </div>
    </div>
    

  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import HeaderVue from '@/components/ncpsy/ZSPT/header/HeaderVue.vue';
import DaoHang from '@/components/ncpsy/ZSPT/DaoHang/DaoHang.vue';
const route = useRoute();
const currentPath = ref(route.path);

watch(
  () => route.path,
  (newPath) => {
    currentPath.value = newPath;
  }
);
</script>

<style scoped>
.zsptct{
    min-height: 100vh;
    display: flex;
    justify-content: start;
}
.daohang{
    width: 230px;
    /* background-color: rebeccapurple; */
}
.showcom{
    width: 95%;
    background-color: #f9fafb;
}
.zspttool{
    padding-top: 10px;
    width: 5%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    border-left: 1px solid rgba(128, 128, 128, 0.24);
    /* background-color: saddlebrown; */
}
.toolname{
    font-size: 13px;
}
.toolicon{
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.tooldiv{
    max-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 10px 0;
}
</style>